<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .router-link-active {
            background-color: brown;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <router-link to="/home" tag="button">跳转到home页</router-link>
        <router-link to="/news" tag="button">跳转到News页</router-link>
        <router-link to="/about" tag="button">跳转到About页</router-link> -->
        <button @click="homeclick">跳转到home页</button>
        <button @click="newclick">跳转到news页</button>
        <button @click="aboutclick">跳转到about页</button>

        <button @click="go">页面刷新</button>
        <router-view> </router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
    <script src='../vue-router.js'></script>
    <script>
        const Home = {
            template: `
            <div>
                <h2>我是Home页</h2>
            </div>
            `,


        }
        const News = {
            template: `
            <div>
                <h2>我是News页</h2>
            </div>
            `

        }
        const Login = {
            template: `
            <div>
                <h2>我是登录页</h2>
                <button @click="login">点击登录</button>
            </div>
            `,
            methods: {
                login() {
                    setTimeout(() => {
                        const token = '12311321'//登录成功跳转到首页
                        localStorage.setItem('token', token)       //将获取的随机的token放到缓存里
                        console.log(this.$route.query)              //查看query里有没有值
                        if (this.$route.query.from) {             //判断页面是从哪里跳转过来的
                            this.$router.replace(this.$route.query.from)        // 从哪跳转登录以后就跳转到哪去
                        } else {
                            this.$router.replace('/home')               //如果直接从登录页 就跳转到首页
                        }

                    }, 1000)
                }
            }

        }
        const About = {
            template: `
            <div>
                <h2>我是about页</h2>
            </div>
            `

        }
        const NotFound = {
            template: `
            <div>
                <h2>404</h2>
            </div>
            `
        }
        const routes = [
            {
                path: '/',
                redirect: '/home'
            },
            {
                path: '/home',
                name: 'home',
                meta: {
                    needLogin: false
                },
                component: Home
            },
            {
                path: '/news',
                name: 'news',
                meta: {
                    needLogin: false
                },
                component: News
            },

            {
                path: '/about',
                name: 'about',
                meta: {
                    needLogin: true
                },
                component: About
            },
            {
                path: '/login',
                name: 'login',
                meta: {
                    needLogin: false
                },
                component: Login
            },
            {
                path: '*',
                component: NotFound
            }

        ]
        const router = new VueRouter({
            routes
        });
        router.beforeEach((to, from, next) => {
            /*
            登录鉴权
            判断缓存中有没有token 有就放行，没有就登录
            先判断是否去登录页，如果去直接放行
            */
            if (!to.meta.needLogin) {     //给每一个路由加上meta属性，判断是否需要登录才能进入页面，如果不需要直接放行，如果需要则跳转到登录页
                next()
            }
            else {
                const token = localStorage.getItem('token')
                    if (to.path === '/login') {             //判断是不是去登录页
                        next()                              //如果是直接放行
                    } else {                                
                        if (token) {                         //如果不是 判断有没有存在token
                            next()                          //有 就放行
                        }
                        else {                              //没有就跳转去登录页登录账号
                            next({
                             path:'/login',                    //将从哪跳转到登录页的路由传给登录页
                             query:{
                                from:to.path   
                             }

                            })
                        }
                }


            }




        })
        const vm = new Vue({
            el: '#app',
            router,
            methods: {
                homeclick() {
                    this.$router.push({
                        name: 'home',
                        params: {
                            name: '范玉峰',
                            age: 18
                        }
                    })
                },
                newclick() {
                    this.$router.push({
                        path: '/news',
                        query: {
                            name: "张三",
                            age: 19
                        }
                    })
                },
                go() {
                    this.$router.go(-1)
                },
                aboutclick() {
                    this.$router.push({
                        path: '/about',
                        query: {
                            name: "法外狂徒",
                            age: 20
                        }
                    })
                }
            }

        })
    </script>
</body>

</html>